<template>
    <div class="tecnoogie">
        <!-- 头部图片 -->
        <div class="child-header f-cen">
            <img src="../assets/images/tecnoogie/slider-top-home.jpg" />
            <div class="mask"></div>
            <div class="box">
                <div class="header-title animate__animated animate__bounceInDown">
                    <div class="title1">Tecnologie biomedicali</div>
                    <div class="title2">I nostri dispositivi</div>
                </div>
            </div>
        </div>
        <!-- 宫格图 -->
        <div class="main">
            <!-- 大标题 -->
            <div class="main-title c">La tecnologia al servizio della salute</div>
            <div class="main-text c">
                I dispositivi Bio-T sono rivolti ai professionisti del settore medicale ed in generale a tutti gli operatori che si occupano
                <br />della salute e del benessere delle persone e non solo.
            </div>
            <div class="main-box f-cen">
                <div class="main-box-content f-col">
                    <div class="f">
                        <div class="row f" v-for="(item1, index) in list" :key="index">
                            <div
                                class="item f"
                                :style="{ background: 'url( ' + item1.imgUrl + ')  no-repeat center' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item1.title }}</div>
                                    <div class="item-left-text">{{ item1.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">SCHEDA PRODOTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="f">
                        <div class="row f" v-for="(item2, index2) in list2" :key="index2">
                            <div
                                class="item f-end"
                                :style="{ background: 'url( ' + item2.imgUrl + ')  no-repeat center ' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item2.title }}</div>
                                    <div class="item-left-text">{{ item2.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">SCHEDA PRODOTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="f">
                        <div class="row f" v-for="(item3, index3) in list3" :key="index3">
                            <div
                                class="item f"
                                :style="{ background: 'url( ' + item3.imgUrl + ')  no-repeat center ' }"
                            >
                                <div class="item-left f-col">
                                    <div class="item-left-title">{{ item3.title }}</div>
                                    <div class="item-left-text">{{ item3.text }}</div>
                                    <a href="#/tecnoogie">
                                        <div class="btn c">SCHEDA PRODOTTO</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间标题 -->
        <div class="middle f-cen">
            <div class="middle-text">Vuoi maggiori informazioni sui nostri dispositivi?</div>
            <a href="#">
                <div class="middle-btn">CONTATTACI ORA</div>
            </a>
        </div>

        <!-- Promozione专栏 -->
        <div class="column-Promozione">
            <div class="column-Promozione-main f-cen">
                <div class="column-Promozione-item">
                    <h1>Promozione ''Rent & Buy''</h1>
                    <h2>OFFERTA COVID</h2>
                    <div class="column-Promozione-item-text">
                        Scopri la soluzione più adatta alle tue esigenze.
                        Acquista ora il tuo dispositivo.
                    </div>
                    <li>
                        <b>Finanziamenti</b> e dilazioni a Tasso 0% a partire da 199€/mese
                    </li>
                    <li>
                        <b>L’iper ammortamento</b>del 170% è disponibile solo fino al 31 Dicembre
                    </li>
                    <li>
                        <b>Credito d’imposta</b> “piano transizione 4.0 – Beni Materiali ed Immateriali, Software e soluzioni in Cloud”
                    </li>
                    <div class="btn f-cen">
                        <a href="#" class="column-Promozione-btn">CONTATTACI ORA</a>
                        <a href="#" class="column-Promozione-btn">RICHIEDI PREVENTIVO</a>
                    </div>
                </div>
                <div class="block"></div>
            </div>
        </div>
    </div>
</template>

<script setup >
let list = [{
    title: 'CIEM System',
    text: 'Worldwide Headquarter',
    imgUrl: 'src/assets/images/tecnoogie/list1.jpg'

}, {
    title: 'BRS Biorisonanza',
    text: 'Worldwide Headquarter ',
    imgUrl: 'src/assets/images/tecnoogie/list2.jpg'

}]
let list2 = [{
    title: 'Papimi',
    text: 'Esclusivisti sul territorio nazionale',
    imgUrl: 'src/assets/images/tecnoogie/list3.jpg'

}, {
    title: 'QXCI-SCIO Eductor',
    text: 'Worldwide Headquarter ',
    imgUrl: 'src/assets/images/tecnoogie/list4.jpg'

}, {
    title: 'BioWell',
    text: 'Worldwide Headquarter ',
    imgUrl: 'src/assets/images/tecnoogie/list5.jpg'

}]
let list3 = [{
    title: 'Bfb Fra.se',
    text: 'Esclusivisti sul territorio nazionale',
    imgUrl: 'src/assets/images/tecnoogie/list6.jpg'

}, {
    title: 'Hi Comby',
    text: 'Worldwide Headquarter ',
    imgUrl: 'src/assets/images/tecnoogie/list7.jpg'

}, {
    title: 'Acqua Pi',
    text: 'Worldwide Headquarter ',
    imgUrl: 'src/assets/images/tecnoogie/list8.jpg'

}]
</script>

<style scoped lang="less">
.tecnoogie {
    .main {
        &-title {
            color: @text-title;
            font-size: 32px;
            font-weight: 600;
            margin-top: 60px;
            margin-bottom: 30px;
        }
        &-text {
            font-size: 14px;
            color: @text-main;
        }
        &-box {
            &-content {
                max-width: @box-width+100px;
                width: 100%;
                padding: 25px;
                .row {
                    width: 100%;

                    .item {
                        margin: 12px 15px;
                        width: 100%;
                        height: 240px;
                        &:first-child {
                            height: 280px;
                        }

                        &-left {
                            justify-content: center;
                            width: 50%;
                            background-color: rgba(255, 255, 255, 0.6);
                            padding: 15px;
                            &-title {
                                color: @text-title;
                                font-size: 24px;
                                font-weight: 600;
                            }
                            &-text {
                                font-style: italic;
                                font-weight: 600;
                                color: @text-main;
                            }
                        }
                        .btn {
                            color: @text;
                            background-color: @bg2;
                            font-size: 12px;
                            border-radius: 3px;
                            margin-top: 20px;
                            max-width: 160px;
                            cursor: pointer;
                            padding: 8px;
                        }
                    }
                }
            }
        }
    }
}
</style>